<template>
	<view>
		<view class="item" v-for="(item, i) in dataList" :key="i" :style="{'width': item.width}" :class="item.light ? 'light' : ''">
			<view class="item-bg">
				<image class="img" :src="require('../../../../static/image/score/level'+ (i+1) +'.png')" mode="widthFix"></image>
				<view class="">
					<view class="title">{{item.title}}</view>
					<view class="score">所需积分：{{item.score}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data () {
			return {
				dataList: [
					{title: '青铜', score: '0', width: '58%', light: true},
					{title: '白银', score: '10', width: '64%', light: true},
					{title: '黄金', score: '30', width: '70%', light: false},
					{title: '铂金', score: '70', width: '76%', light: false},
					{title: '钻石', score: '300', width: '82%', light: false},
					{title: '翡翠', score: '900', width: '88%', light: false},
					{title: '大师', score: '3000', width: '94%', light: false},
					{title: '战神', score: '6000+', width: '100%', light: false}
				]
			}
		}
	}
</script>

<style scoped lang="less">
	.item{
		background: linear-gradient(to right, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 95%);
		height: 92px;
		border-radius: 92px 0 0 92px;
		padding-top: 6px;
		box-sizing: border-box;
		margin-bottom: 14px;
		.item-bg{
			background: linear-gradient(to right, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 95%);
			height: 80px;
			border-radius: 80px 0 0 80px;
			display: flex;
			align-items: center;
			color: rgba(255,255,255,.65);
		}
		.title{
			font-family: hzgb;
			font-size: 20px;
			margin-bottom: 8px;
		}
		.score{
			font-family: hzgb;
			font-size: 14px;
		}
		&.light{
			.title, .score{
				background-image: -webkit-linear-gradient(bottom, #d9b059, #f5ea90);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			.img{
				opacity: 1;
			}
		}
	}
	
	.img{
		width: 80px;
		height: auto;
		opacity: 0.5;
		margin-right: 10px;
		margin-left: 10px;
	}
	
</style>